<!--
@description: 问题上报
@creationTime: 2023-10-01
-->

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '问题上报'
  }
}
</route>

<template>
  <view>
    <wd-form :model="formData" ref="formRef" border>
      <view class="flex flex-justify-between m-3 box-border flex-items-center">
        <text class="text-lg font-size-3 font-800">问题上报</text>
      </view>
      <wd-card>
        <wd-input
          label="问题标题"
          prop="title"
          placeholder="请输入问题标题"
          v-model="formData.title"
          :rules="[{ required: true, message: '请输入问题标题' }]"
        />
        <wd-input
          label="问题箱柜"
          prop="cabinet"
          placeholder="请选择问题箱柜"
          v-model="formData.cabinet"
          :rules="[{ required: true, message: '请输入问题箱柜' }]"
        />
        <wd-input
          label="问题描述"
          placeholder="请输入问题描述"
          prop="description"
          v-model="formData.description"
          :rules="[{ required: true, message: '请输入问题描述' }]"
        />
        <wd-input
          label="指派人员"
          prop="assignee"
          bplaceholder="请选择指派人员"
          v-model="formData.assignee"
          :rules="[{ required: true, message: '请输入指派人员' }]"
        />
      </wd-card>
      <wd-card>
        <wd-cell label="是否创建工单" prop="createTicket" :vertical="true" custom-class="p-0! m-0!">
          <wd-switch label="是否创建工单" v-model="formData.createTicket" />
        </wd-cell>
      </wd-card>
      <wd-card>
        <wd-cell label="问题图片" prop="image" :vertical="true" custom-class="p-0! m-0!">
          <wd-upload
            label="问题图片"
            prop="image"
            v-model="formData.image"
            :rules="[{ required: true, message: '请上传问题图片' }]"
          />
        </wd-cell>
      </wd-card>

      <view class="my-3 mx-2">
        <wd-button type="primary" :block="true" @click="submit">提交</wd-button>
      </view>
    </wd-form>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const formData = ref<any>({
  title: '',
  cabinet: '',
  description: '',
  createTicket: false,
  assignee: '',
  image: []
})
const formRef = ref()

const submit = async () => {
  let validate = await formRef.value.validate()

  if (!validate.valid) return

  //   await addReportApi(formData.value)
  uni.showToast({ title: '保存成功', icon: 'success' })
  uni.navigateBack()
}
</script>

<style lang="scss" scoped></style>
